<template>
  <div class="app-container" >

    <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);padding: 1px 0  25px 0">

      <p style="border-bottom:1px solid #E8E8E8  ;padding-bottom:20px">&nbsp;&nbsp;&nbsp;&nbsp;添加用户</p>
      <el-form :rules="rules" label-width="120px">
        <el-form-item label="姓名">
          <el-input v-model="user.uname" required="required"/>
        </el-form-item>

        <el-form-item label="手机号码">
          <el-input v-model="user.uphone" required="required"/>
        </el-form-item>
        <el-form-item label="身份证">
          <el-input v-model="user.identify" required="required"/>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="user.upassword" type="password" required="required"/>
        </el-form-item>

        <!-- 讲师头像：TODO -->
        <!-- 讲师头像：TODO -->
        <el-form-item label="头像">
          <!-- 头衔缩略图 -->
          <pan-thumb :image="user.img" />
          <!-- 文件上传按钮 -->
          <el-button
            type="primary"
            icon="el-icon-upload"
            @click="imagecropperShow = true">更换头像
          </el-button>

          <!--
            v-show：是否显示上传组件
            :key：类似于id，如果一个页面多个图片上传控件，可以做区分
            :url：后台上传的url地址
            @close：关闭上传组件
            @crop-upload-success：上传成功后的回调
        -->
          <image-cropper
            v-show="imagecropperShow"
            :width="300"
            :height="300"
            :key="imagecropperKey"
            :url="BASE_API + '/e/fileoss/upload'"
            field="file"
            @close="close"
            @crop-upload-success="cropSuccess"
          />
        </el-form-item>

        <el-form-item>
          <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>
<script>
import user from '@/api/e/user/user'
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'
export default {
  components: { ImageCropper, PanThumb },
  data() {
    return {
      user: {
        uname: '',
        uphone: '',
        identify: '',
        upassword: '',
        img: 'https://edu-default-images.oss-cn-shenzhen.aliyuncs.com/2022/09/21/f6b2b0822c644fd895290ef3db833d8eCoolTiger.jpeg'
      },
      saveBtnDisabled: false, // 保存按钮是否禁用,
      // 上传弹框组件是否显示
      imagecropperShow: false,
      // 上传组件key值
      imagecropperKey: 0,
      // 获取dev.env.js中的地址
      BASE_API: process.env.BASE_API
    }
  },
  created() {
    if (this.$route.params && this.$route.params.id) {
      const id = this.$route.params.id
      this.getuserInfo(id)
    }
  },
  methods: {
    // 关闭上传弹窗的方法
    close() {
      this.imagecropperShow = false
      // 上传失败后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
      this.imagecropperKey = this.imagecropperKey + 1
    },
    // 上传成功方法
    cropSuccess(data) {
      console.log(data)
      this.imagecropperShow = false
      this.user.img = data.url
      // 上传成功后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
      this.imagecropperKey = this.imagecropperKey + 1
    },
    // 该方法要实现添加和修改两个功能
    saveOrUpdate() {
      // 判断是修改还是添加
      // 根据teacher是否有id
      if (!this.user.id) {
        this.add()
      } else {
        this.updateUser()
      }
    },
    // 保存
    add() {
      if (this.user.uname === '' || this.user.uphone === '' || this.user.identify === '' || this.user.upassword === '') {
        this.$message({
          type: 'success',
          message: '请完善信息!'
        })
        return false
      }
      this.saveBtnDisabled = true
      user.add(this.user).then(response => {
        this.$message({
          type: 'success',
          message: '添加成功!'
        })
        // 重新查询数据，路由跳转
        this.$router.push({ path: '/e/user/list' })
      })
    },
    // 根据讲师id查询讲师
    getuserInfo(id) {
      user.getUserInfo(id).then(response => {
        this.user = response.data.user
      })
    },
    // // 根据id更新记录
    updateUser() {
      user.updateUserById(this.user).then(response => {
        this.$message({
          type: 'success',
          message: '修改成功!'
        })
        // 重新查询数据，路由跳转
        this.$router.push({ path: '/e/user' })
      })
    }
  }

}
</script>
